<template>
	<view v-if="tableData.length!==0" v-for="(item,index) in tableData ">
		<uni-row>
			<uni-col :span="5">
				<image style="width: 150rpx;height: 150rpx;" :src="item.goods.imgUrl"></image>

			</uni-col>
			<uni-col :span="19" style="display: flex;justify-content: space-around;">
				<view>
					<view>{{item.goods.name}}</view>
					<view>{{item.actualPrice}}元</view>
					<view>{{item.count}}杯</view>
					<view v-if="item.size ==='L'">大杯</view>
					<view v-if="item.size ==='M'">中杯</view>
					<view v-if="item.size ==='S'">小杯</view>
				</view>
				<view>
					<text style="text-decoration:underline" @click="doDelete(item.id,index)">删除</text>

				</view>
			</uni-col>
		</uni-row>


	</view>
	<view v-else>
		<image
			src="https://bpic.588ku.com/element_pic/23/04/24/a412da6d74a5deb108ad6e051d7e78cc.png!/fh/350/unsharp/true/format/png">
		</image>
	</view>


	<view v-if="tableData.length!==0" class="footer">
		<view>
			<text class="total">总价：{{totalPrice}}元</text>
		</view>
		<view>
			<text class="btn" @click="doSubmit">结算</text>
		</view>

	</view>





</template>

<script setup>
	import {
		onMounted,
		ref,
		computed
	} from 'vue';

	import {
		onShow
	} from '@dcloudio/uni-app'



	onShow(() => {
		if (isLogin()) {
			query()
		}

	})
	//当前用户
	const currentUser = ref('')
	//当前购物车数据
	const tableData = ref([])


	const query = () => {
		uni.request({
			url: `http://localhost:3000/carts?memberId=${currentUser.value.id}`,
			success: (res) => {
				tableData.value = res.data;
			}
		})


	}
	//判断是否登录
	const isLogin = () => {
		const userJson = uni.getStorageSync("loginUser");
		if (userJson) {
			currentUser.value = JSON.parse(userJson)
			return true;

		} else {

			uni.showToast({
				title: "您还没有登录",
				duration: 2000

			})
			//清空购物车页面 
			tableData.value = []

			return false;

		}
	}

	const totalPrice = computed(() => {
		return tableData.value.reduce((value, item) => {
			return value + item.actualPrice * item.count;
		}, 0)


	})


	const doDelete = (id, index) => {
		uni.request({
			url: `http://localhost:3000/carts/${id}`,
			method: 'DELETE',
			success: (res) => {
				uni.showToast({
					title: '已经删除' + index,
					duration: 2000
				})
				//通过数据驱动 删除dom元素
				tableData.value.splice(index, 1)

			}

		})

	}

	//结算
	const doSubmit = () => {
		uni.request({
			url: 'http://localhost:3000/orders',
			method: 'post',
			data: {
				memberId: currentUser.value.id,
				totalPrice: totalPrice.value,
				orderDate: new Date(),
				isPay: "0",
				items: tableData.value

			},
			success: (res) => {
				uni.showToast({
					title: '订单已经生成',
					duration: 2000
				})
				//TODO  
				//清空购物车  (一个一个删除)
				tableData.value.forEach((item ,index)=>{
					doDelete(item.id,index)    //存在bug了
				})
				
				//一次性清空
				tableData.value=[];
				
				
				
			}
		})


	}
</script>

<style scoped lang="scss">
	.footer {
		background-color: antiquewhite;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 80rpx;
		right: 0;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 10rpx;

		.total {
			font-weight: bold;
			font-size: 1.2rem;
			line-height: 80rpx;
		}

		.btn {
			background-color: black;
			color: white;
			width: 150rpx;
			display: inline-block;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			cursor: pointer;


		}

	}
</style>